<template>
  <a-tabs v-model:activeKey="activeKey" class="index-tab" @change="handleClick">
    <a-tab-pane v-for="(pane, index) in appTabsPanes" :key="index" :tab="pane.title"> </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
  import { Tabs } from 'ant-design-vue';
  import { defineComponent, Ref, PropType, unref } from 'vue';
  import { AppTab } from '../types';
  export default defineComponent({
    name: 'vueName',
    props: {
      appTabsPanes: {
        type: [Array] as PropType<AppTab[]>,
        default: [],
      },
      appTabsActiveKey: {
        type: Number,
        default: 0,
      },
    },
    emits: ['change'],
    components: { [Tabs.name]: Tabs, [Tabs.TabPane.name]: Tabs.TabPane },
    setup(props, { emit }) {
      function handleClick(e) {
        emit('change', e);
      }
      const activeKey = unref(props.appTabsActiveKey);
      return {
        // appTabsPanes,
        // appTabsActiveKey,
        activeKey,
        handleClick,
      };
    },
  });
</script>

<style scoped lang="less"></style>
